<template>
	<view class="modal" v-if="showCollect">
		
	
		<view class="modal-con" >
			<div class="title">{{data.settings.collect_desc}}</div>
		<!-- 	<div class="col">
				<span>姓名：</span>
				<input class="input" v-model="info.username"></input>
			</div> -->
			<div class="col mg-20">
				<!-- <span>手机号：</span> -->
				<input class="input"  v-model="info.phone" placeholder="请填写手机号"/>
				<!-- <div class="input">
					<input  v-model="info.phone"></input>
					<br/>
					<div v-if="ruleMsg!=''">
						{{ruleMsg}}
					</div>
				</div> -->
				
			</div>
			<div class="col">
				<span class="btn" @click="back">返回</span>
				<span class="btn" @click="submitInfo">确认</span>
			</div>
		</view>
	</view>
</template>

<script >
import { mapGetters } from 'vuex'
import {getUserPhone,setUserPhone} from '@/api/api'
import {checkLogin} from '@/until/QFH5.js'
	export default{
		props:{
			data:{
				default:()=>{  
					return{}
				}
			}
		},
		computed:{
			...mapGetters(['showCollect']),
			ruleMsg(){
				if(this.info.phone==''){
					return ''
				}else{
					let pat = new RegExp(/^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/)
					if(pat.test(this.info.phone)){
						return '请输入正确的11位手机号'
					}else{
						return ''
					}
				}
			}
		},
		data(){
			return{
				info:{
					username:'',
					phone:''
				},
				needGuide:true
			}
		},
		methods:{
			back(){
				this.$store.commit('SET_SHOWCOLLECT',false)
			},
			submitInfo(){
				let pat = new RegExp(/^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/)
				console.log(pat.test(this.info.phone))
				if(this.info.phone==''){
					uni.showToast({
						icon:'none',
						title:'手机号不能为空!'
					})
					return
				}
				if(!pat.test(this.info.phone)){
					uni.showToast({
						icon:'none',
						title:'请输入正确的11位手机号!'
					})
					return
				}
				setUserPhone({phone:this.info.phone}).then(res=>{
					if(res.code==0){
						this.init()
						uni.showToast({
							title:'绑定成功',
							icon:'none'
						})
						this.$store.commit('SET_SHOWCOLLECT',false)
					}else{
						uni.showToast({
							title:res.text,
							icon:'none'
						})
					}
				})
				
				// this.$emit('back')
			},
			async init(){
				// return
				let loginStatus = await checkLogin()
				if(loginStatus){
					getUserPhone().then(res=>{
						// if(res.data.phone==''){
							this.$store.commit('SET_SHOWCOLLECTPHONE',res.data.phone)
						// }
					})
				}
				
			}
		},
		mounted(){
			 this.init()
		}
	}
</script>

<style lang="scss" scoped>
	.modal{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.7);
		z-index: 99;
	}
	.modal-con{
		width: 590rpx;
		// height: 472px;
		background: #FFFFFF;
		box-shadow: 0rpx 3rpx 10rpx 1rpx rgba(0,0,0,0.2);
		border-radius: 30rpx;
		// width: 600rpx;
		padding: 70rpx 25rpx 100rpx;
		// min-height: 280rpx;
		
// height: 472rpx;
		// border-radius: 12rpx;
		// box-shadow: 0 0 7rpx 1rpx #c5c5c5;
		background: #fff;
		position: relative;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		z-index: 89;
		.title{
			width: 500rpx;
			text-align: center;
			margin: 0rpx auto 33rpx;
			font-size: 36rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
			
		}
		.col{
			width: 100%;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			span{
				display: block;
				// width: 140rpx;
				// text-align: center;
				// font-size: 28rpx;
			}
			&>.input{
				// width: 300rpx;
				// height: 50rpx;
				// border: 1rpx solid #e5e5e5;
				// font-size: 28rpx;
				// // padding: 1rpx 4rpx;
				// padding-left: 12rpx;
				// border-radius: 8rpx;
				width: 590rpx;
				height: 100rpx;
				padding-left: 76rpx;
				background: #F6F6F6;
				border-radius: 50rpx;
				font-size: 36rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				
			}
			&>.btn{
				width: 280rpx;
				height: 90rpx;
				line-height: 90rpx;
				font-size: 28rpx;
				background: #fff;
				color: #FF3255;
				margin: 52rpx 20rpx 7rpx;
				border-radius: 43rpx;
				border: 1rpx solid #FF3255;
				text-align: center;
				font-size: 36rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				&::after{
					// border: none;
				}
				&:nth-child(2){
					background: #FF3255;
					color: #fff;
					border: 1rpx solid #FF3255;
				}
			}
		}
		.mg-20{
			margin-bottom: 40rpx;
		}
	}
</style>